<template>
    <div class="trigger-application" @click.stop>
        <el-steps :active="active" finish-status="success" simple>
            <el-step 
				v-for="(step, index) in steps" 
				:key="index" 
				:title="step.title" 
				:class="isCanClick(index) ? 'canClick' : 'canNotClick'"
				@click.native="setActive(index)"
			>
                <div slot="icon" class="stepCircle">{{ index + 1 }}</div>
            </el-step>
        </el-steps>
        <sleect-application v-show="active === 0" @clickApi="setActive(1)" @changeShowApi="changeShowApi" :showApi="showApi"/>
        <trigger-action v-if="active === 1" />
    </div>
</template>

<script>
import state from '@src/modules/trigger/view/setting/util/state.js';
import SleectApplication from './components/select_application';
import TriggerAction from './components/trigger_action';

export default {
    name: 'TriggerApplication',
    components: {
        SleectApplication,
        TriggerAction,
    },
    computed: {
        state() {
            return state;
        },
    },
    data() {
        return {
            steps: [
                { title: "选择应用对象" },
                { title: "触发动作" },
            ],
            active: 0,
            showApi: false, // 点击选择应用对象时需要展示选择应用对象，不要跳到选择api
        }
    },
    created() {
        if (state.currentNodeInfoFront?.options?.apiId) {
            this.active = 1;
        }
    },
    methods: {
        setActive(index) {
            if (!this.isCanClick(index)) return;
            this.active = index;
            if (index === 0) {
                this.showApi = false;
            } else {
                this.showApi = true;
            }
        },
        changeShowApi(val) {
            this.showApi = val;
        },
        isCanClick(index) {
			const { apiId = '' } = state.currentNodeInfoFront?.options || {};
            // 未选择api无法进入选择触发动作
			if ( index === 1 && !apiId) return false;
			return true
		}
    }
}
</script>

<style scoped lang="scss">
.canClick {
	cursor: pointer;
    ::v-deep .is-wait {
        .el-step__icon {
            background-color: $color-primary;
            border-color: $color-primary;
            color: #fff;
        }

        color: #303133;
    }
}

.canNotClick {
	cursor: not-allowed;
}
.trigger-application {
    height: 100%;
    ::v-deep .el-steps {
        background-color: #fff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        border-radius: 0;
        font-size: 14px;
        padding: 24px;

        .el-step {
            flex-basis: auto !important;

            &__icon {
                width: 24px;
                height: 24px;
            }

            &__arrow {
                margin: 0 20px;
            }

            &__arrow::before {
                content: "";
                display: inline-block;
                position: absolute;
                bottom: 4px;
                height: 10px;
                width: 1px;
                background: #C0C4CC;
            }

            &__arrow::after {
                content: "";
                display: inline-block;
                position: absolute;
                top: 4px;
                height: 10px;
                width: 1px;
                background: #C0C4CC;
            }

            &__title {
                font-size: 14px;
                max-width: 100%;
            }

            &__title.is-process {
                font-weight: 400;
            }

            &__head.is-process {
                .el-step__icon {
                    background-color: $color-primary;
                    border-color: $color-primary;
                    color: #fff;
                }
            }

            &__head.is-success {
                .el-step__icon {
                    background-color: $color-primary;
                    border-color: $color-primary;
                    color: #fff;
                    font-size: 18px;
                }
            }
        }
    }
}
</style>